<template>
  <!-- <el-drawer title="属性面板" size="350px" class="property-panel" :modal="false" :show-close="true" ref="propertyPanel" :visible.sync="infoShow" :with-header="false"> -->

  <transition name="el-zoom-in-center">
    <div class="property-panel transition-box" v-show="infoShow" ref="propertyPanel">
            <!-- 属性表单 -->
      <component :is="configName" :form="form"  :element="element" :modeler="modeler"></component>
    </div>
  </transition>

  <!-- </el-drawer> -->
</template>

<script>
// import { mapActions, mapGetters, mapMutation } from 'vuex'
import Axios from 'axios'
import Vue from 'vue'
export default {
  name: "PropertyPanel",
  props: {
    modeler: {
      type: Object,
      required: true
    }
  },
  computed: {
    userTask() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:UserTask";
    },
    sequenceFlow() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:SequenceFlow";
    },
    fromShow(){
       if (!this.element) {
        return;
      }else{
        if(this.element.type === 'bpmn:SequenceFlow'){
          return true
        }else return false
      }
    }
  },
  data() {
    return {
      infoShow: false,
      configName: '',
      form: {
        id: "",
        name: "",
        color: null
      },
      element: {},
      users: [
        {
          value: "zhangsan",
          label: "张三"
        },
        {
          value: "lisi",
          label: "李四"
        },
        {
          value: "wangwu",
          label: "王五"
        }
      ],
      roles: [
        {
          value: "manager",
          label: "经理"
        },
        {
          value: "personnel",
          label: "人事"
        },
        {
          value: "charge",
          label: "主管"
        }
      ]
    };
  },
  created(){},
  mounted() {
    this.handleModeler();
  },
  methods: {
    handleModeler() {
      // 监听节点选择变化
      this.modeler.on("selection.changed", e => {
        const element = e.newSelection[0];
        this.element = element;
        // console.log(element);
        if (!element) {
          this.infoShow = false;
          this.form = {
            id: "",
            name: "",
            color: null
          };
        } else {
          // var type = this.element.type.split(":")[1];
          var type = this.element.type
          // console.log(type);
          if (
            !(type === "bpmn:StartEvent") &&
            !(type === "bpmn:IntermediateThrowEvent") &&
            !(type === "bpmn:EndEvent")
          ) {
            /**细化 线体  元素 */
            this.infoShow = true;
            // ExclusiveGateway  元素类型
            // SequenceFlow   线体类型

            /**判断点击元素是否为线体 */
            if(type === "bpmn:SequenceFlow"){
              this.filePaths('Linear')
              /**判断该线体是否有颜色属性 */
              var isColor = Object.prototype.hasOwnProperty.call(element.businessObject.$attrs, "color")
              if(isColor){
                /**直接赋值 */
                this.form = {
                  ...element.businessObject,
                  ...element.businessObject.$attrs
                };
              }else{
                /**设置默认值 */
                this.form = {
                  ...element.businessObject,
                  ...{color:'#000000'}
                };
              }
              /**点击为圆角矩形 */
            }else{
              this.filePaths('nodeElement')
              this.form = {
                ...element.businessObject,
                ...element.businessObject.$attrs
              };
            }
            if (this.form.userType === "candidateUsers") {
              this.form["candidateUsers"] =
              this.form["candidateUsers"].split(",") || [];
            }
          } else {
            this.infoShow = false;
            // console.log("不显示")
          }
          // console.log(this.$store)
          this.$store.commit('handleForm', this.form)
          this.$store.commit('handleModeler', this.element)
          this.$store.commit('handleElement', this.modeler)

        }
      })

      //  监听节点属性变化
      this.modeler.on("element.changed", e => {
        const { element } = e;
        if (!element) return;
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name;
          this.form = { ...this.form };
        }
      });
    },
    filePaths(type){
      Axios.post('/api/propertyPanelPath',{type: type}).then(res => {
        this.configName = Vue.component(res.data.fileName, resolve => {
          require([`@/components/${res.data.filePath}`], resolve)
        })
      })
    },
    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.modeler.get("modeling");
      modeling.updateLabel(this.element, name);
    },
    // 属性面板颜色，更新回流程节点
    colorChange(color) {
      const modeling = this.modeler.get("modeling");
      modeling.setColor(this.element, {
        fill: null,
        stroke: color
      });
      modeling.updateProperties(this.element, { color: color });
    },
    // 任务节点配置人员
    addUser(properties) {
      this.updateProperties(
        Object.assign(properties, {
          userType: Object.keys(properties)[0]
        })
      );
    },
    // 切换人员类型
    typeChange() {
      const types = ["assignee", "candidateUsers", "candidateGroups"];
      types.forEach(type => {
        delete this.element.businessObject.$attrs[type]
        delete this.form[type]
      });
    },
    // 在这里我们封装一个通用的更新节点属性的方法
    updateProperties(properties) {
      const modeling = this.modeler.get("modeling")
      modeling.updateProperties(this.element, properties)
    }
  }
};
</script>

<style lang="scss" scoped>
.property-panel {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border-left: 1px solid #cccccc;
  // padding: 20px 0;
  width: 330px;
  // height: 100%;
  background: #cccccc;
  form {
    padding: 20px 0px;
  }
}
</style>
